<template>
	<view class="gyd-navbar">
		<!-- #ifdef H5 -->
		<view v-if="placeholder">
			<view :class="fixed ? 'fixed-top' : ''" :style="containerStyle">
				<view class="statusbar" :style="'height:' + statusbarHeight + 'px'"></view>
				<view class="base-navbar" v-if="isMenu">
					<view class="menu" :style="contentStyle">
						<slot></slot>
					</view>
				</view>
				<view class="base-navbar" v-else>
					<view class="back" :style="iconStyle">
						<uni-icons type="left" :color="backColor" :size="backSize" @click="goBack"
							v-if="isBack"></uni-icons>
						<slot name="back"></slot>
					</view>
					<view class="title" :style="titleStyle">
						<view :style="titleStyle" v-if="title">
							{{ getTitle(title) }}
						</view>
						<slot></slot>
					</view>
					<view class="nav-content" :style="contentStyle">
						<slot name="content"></slot>
					</view>
				</view>
			</view>
			<view class="navbar" :style="'height:' + navbarHeight + 'px'" v-if="fixed"></view>
		</view>
		<view v-else>
			<view class="statusbar" :style="'height:' + statusbarHeight + 'px'"></view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import cache from '@/utils/cache';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		onMounted,
		defineProps
	} from 'vue';

	defineOptions({
		name: 'gyd-navbar'
	});

	const state = reactive({
		themeColor: cache.get('themeColor'),
		statusbarHeight: 0,
		navbarHeight: 0,
	});

	const props = defineProps({
		delta: {
			type: [Number, String],
			default: 1
		},
		bgColor: {
			type: String,
		},
		opacity: {
			type: Number,
			default: 1
		},
		title: {
			type: String,
			default: ''
		},
		titleStyle: {
			type: Object,
			default: () => ({
				fontSize: '34rpx',
				color: '#fff',
				fontWeight: 'bold'
			})
		},
		iconStyle: {
			type: Object,
			default: () => ({})
		},
		contentStyle: {
			type: Object,
			default: () => ({})
		},
		isBack: {
			type: Boolean,
			default: true
		},
		isMenu: {
			type: Boolean,
			default: false
		},
		backColor: {
			type: String,
			default: '#303133'
		},
		backSize: {
			type: [String, Number],
			default: '24'
		},
		fixed: {
			type: Boolean,
			default: true
		},
		placeholder: {
			type: Boolean,
			default: true
		},
	})

	// 计算属性
	const containerStyle = computed(() => {
		const {
			gradient
		} = cache.get('themeColor');
		return {
			background: gradient || props.backColor,
			opacity: props.opacity
		}
	});

	// 组件实例挂载到DOM后执行
	onMounted(() => {
		// 在这里执行其他需要在组件挂载后运行的代码
		// #ifdef APP
		state.statusbarHeight = plus.navigator.getStatusbarHeight();
		console.log('APP状态栏1', state.statusbarHeight)
		// #endif
		// #ifdef MP
		state.statusbarHeight = getStatusBarHeight();
		console.log('小程序状态栏1', state.statusbarHeight)
		// #endif
		state.navbarHeight = state.statusbarHeight + uni.upx2px(88);
		console.log('状态栏2', state.navbarHeight)
	});

	function getStatusBarHeight() {
		let statusBarHeight = 0;
		uni.getSystemInfo({
			success: function(info) {
				// console.log('状态栏的高度：' + info.statusBarHeight);
				statusBarHeight = info.statusBarHeight;
			}
		});
		return statusBarHeight;
	}

	function goBack() {
		if (props.delta == 'profile') {
			uni.switchTab({
				url: '/pages/tabbar/profile/profile'
			})
		}
		uni.navigateBack({
			delta: props.delta
		})
	}

	function getTitle(title) {
		if (title.length >= 11) {
			return title.substring(0, 10) + '...';
		} else {
			return title;
		}
	}

	const {
		themeColor,
		statusbarHeight,
		navbarHeight,
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.gyd-navbar {
		.fixed-top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
		}

		.base-navbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			max-height: 88rpx;
			padding: 0 24rpx;

			.menu {}

			.back,
			.nav-content {
				display: flex;
				align-items: center;
				width: 30%;
			}

			.back,
			.title,
			.nav-content {
				height: 100%;
				line-height: 88rpx;
			}

			.nav-content {
				max-width: 60%;
				height: 88rpx;
				overflow-x: hidden;
			}

			.back {
				.u-icon {
					justify-content: center;
					width: 88rpx;
					height: 88rpx;
				}
			}

			.title {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				flex: 1;
			}

			.nav-content {
				justify-content: flex-end;
			}
		}
	}
</style>